<template>
    <van-cell :border="false" title-class="product-cell-title" value-class="product-cell-value" @click="handleClick"
              center
              :value="value">
        <template #title>
            <span class="product-cell-name">{{name}}</span>
            <span class="product-cell-content"><slot name="content"/></span>
        </template>
        <template #right-icon v-if="arrow">
            <van-icon name="arrow" class="van-cell__right-icon"/>
        </template>
    </van-cell>
</template>

<script>
  import { Cell, Icon } from "vant"

  export default {
    name: "ProductCell",
    components: {
      [Cell.name]: Cell,
      [Icon.name]: Icon,
    },
    props: {
      name: String,
      content: String,
      value: String,
      arrow: Boolean,
    },
    methods: {
      handleClick(event) {
        this.$emit("click", event)
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .product-cell-title {
        display: inline-flex;
        align-content: center;
        flex: 1.5;
    }

    .product-cell-name {
        display: inline-block;
        width: 46px;
        color: $gray-6;
    }

    .product-cell-value {
        flex: 0.5;
    }

    .product-cell-content {
        display: inline-flex;
        align-items: center;
    }

</style>
